<template>
    <div class="tomcat-info">
        <div class="alert">
            <el-alert :closable="false" :show-icon="true" type="success">
                数据获取时间 {{ datetime }}
                <a style="position: absolute; right: 35px; cursor: pointer" @click="onRefresh">点击刷新</a>
            </el-alert>
        </div>

        <el-table :data="dataSource" style="margin-top: 5px">
            <el-table-column label="参数" prop="name"></el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column label="当前值" prop="value"></el-table-column>
        </el-table>
    </div>
</template>
<script>
import axios from 'axios';
import {service} from "@/utils";

import {defineComponent, getCurrentInstance, onMounted, reactive, ref} from 'vue';

export default defineComponent({
    setup() {
        const {proxy} = getCurrentInstance();

        const dataSource = ref([]);
        const datetime = ref([]);

        const desc = reactive({
            'tomcat.sessions.created.count': {desc: 'Tomcat已创建Session数', unit: '个'},
            'tomcat.sessions.expired.count': {desc: 'Tomcat已过期Session数', unit: '个'},
            'tomcat.sessions.active.current': {desc: 'Tomcat当前活跃Session数', unit: '个'},
            'tomcat.sessions.active.max': {desc: 'Tomcat活跃Session数峰值', unit: '个'},
            'tomcat.sessions.rejected.count': {desc: '超过Session最大配置后，拒绝的Session个数', unit: '个'},
            'tomcat.global.sent.count': {desc: '发送的字节数', unit: 'Byte'},
            'tomcat.global.request.max': {desc: '全局Request请求最长耗时', unit: '秒'},
            'tomcat.global.request.count': {desc: '全局Request请求次数', unit: '次'},
            'tomcat.global.request.totalTime': {desc: '全局Request请求总耗时', unit: '秒'},
            'tomcat.servlet.request.max': {desc: 'Servlet请求最长耗时', unit: '秒'},
            'tomcat.servlet.request.count': {desc: 'Servlet总请求次数', unit: '次'},
            'tomcat.servlet.request.totalTime': {desc: 'Servlet请求总耗时', unit: '秒'},
            'tomcat.threads.current': {desc: 'Tomcat 当前线程数(包括守护线程)', unit: '个'},
            'tomcat.threads.config.max': {desc: 'Tomcat配置的线程最大数', unit: '个'}
        });

        const onRefresh = () => {
            let date = new Date();
            datetime.value = date.getFullYear() + '年' + date.getMonth() + '月' + date.getDay() + '日' +
                    date.getHours() + '时' + date.getMinutes() + '分' + date.getSeconds() + '秒';

            axios.all([
                service.get('/actuator/metrics/tomcat.sessions.created'),
                service.get('/actuator/metrics/tomcat.sessions.expired'),
                service.get('/actuator/metrics/tomcat.sessions.active.current'),
                service.get('/actuator/metrics/tomcat.sessions.active.max'),
                service.get('/actuator/metrics/tomcat.sessions.rejected'),
                service.get('/actuator/metrics/tomcat.global.sent'),
                service.get('/actuator/metrics/tomcat.global.request.max'),
                service.get('/actuator/metrics/tomcat.global.request'),
                service.get('/actuator/metrics/tomcat.global.request'),
                service.get('/actuator/metrics/tomcat.global.request.max'),
                service.get('/actuator/metrics/tomcat.threads.current'),
                service.get('/actuator/metrics/tomcat.threads.config.max')
            ]).then((r) => {
                dataSource.value = [];
                r.forEach(item => {
                    for (let i = 0; i < item.measurements.length; i++) {
                        let obj = {};
                        let measurement = item.measurements[i];
                        obj.name = measurement.statistic === 'VALUE' ? item.name : item.name + '.' + measurement.statistic.toLowerCase().toCamelCase();
                        let dc = desc[obj.name];
                        obj.value = (dc.convert ? dc.convert(measurement.value) : measurement.value) + (dc.unit || '');
                        obj.description = dc.desc;
                        dataSource.value.push(obj);
                    }
                });
            }).catch((r) => {
                console.error(r);
                proxy.$message.error('获取Tomcat信息失败');
            });
        };

        onMounted(() => onRefresh());
        return {
            datetime, dataSource,
            onRefresh
        };
    }

});
</script>
<style lang="scss" scoped>
.tomcat-info {
    width: 100%;

    table {
        width: 100%;

        tr {
            line-height: 1.5rem;
            border-bottom: 1px solid #f1f1f1;

            th {
                background: #fafafa;
                padding: .5rem;
            }

            td {
                padding: .5rem;

                .ant-tag {
                    font-size: .8rem !important;
                }
            }
        }
    }

}
</style>
